<template>
  <div class="content-outer">
    <Block class="content-head">
      <BiForm>
        <BiFormItem label="模版名称">
          <template slot="content">
            <el-input
              v-model="requestData.name"
              clearable
              placeholder="请输入模版名称"
            />
          </template>
        </BiFormItem>
        <BiFormItem>
          <template slot="button">
            <el-button
              style="margin-left: 10px"
              type="primary"
              @click="startSearch"
            >查询</el-button>
            <el-button @click="reset">重置</el-button>
          </template>
        </BiFormItem>
      </BiForm>
    </Block>
    <Block class="content-table ">
      <div class="rowFlex templateContent rowCenter">
        <div class="templateList rowFlex   flexWarp">
          <div
            v-for="(item,index) in templateList"
            :key="index"
            class="templateItem"
          >
            <rechargeTemplate
              :data="item"
              @radioChange="radioChange"
            />
          </div>
        </div>
      </div>
      <span
        class="rowFlex allCenter"
        style="margin:40px 0;"
      >
        <el-button
          class="btn"
          @click="close"
        >取 消</el-button>
        <el-button
          :loading="loading"
          class="btn"
          type="primary"
          @click="submit"
        >确 定</el-button>
      </span>
      <page
        :page-info="page_info"
        @requestNextPage="requestNextPage"
      />
    </Block>
  </div>
</template>

<script>
// import addMerchant from './component/addMerchant.vue'
import { rechargeList } from '@/api/recharge'
import { channelTemplateSave } from '@/api/channel'
import rechargeTemplate from '@/common/component/rechargeTemplate.vue'
import page from '@/common/component/page.vue'
export default {
  name: 'Pays',
  components: {
    // BiDrawer,
    rechargeTemplate,
    page
  },
  data() {
    return {
      loading: false,
      page_info: {
        page: 1,
        page_size: 20,
        total: 0
      },
      requestData: {
        body: '',
        merchant_id: ''
      },
      templateList: [],
      cofigInfo: {
        money: '100'
      }
    }
  },

  mounted() {
    this.clickSearch()
  },
  methods: {
    startSearch() {
      this.page_info.page = 1
      this.clickSearch()
    },
    submit() {
      this.loading = true
      const template_id = this.templateList.filter((item) => item.checkedValue)
      if (template_id.length > 1) {
        this.$message.warning('只能选择一个充值模版')
        return false
      }
      console.log(template_id, 'template_id')
      const data = {
        channel_id: this.$route.query.id,
        template_id: template_id[0].id
      }
      channelTemplateSave(data).then((res) => {
        if (res.status_code === 1) {
          this.$message.success(res.msg)
        }
        this.loading = false
      })
    },
    initData() {
      this.clickSearch()
    },
    radioChange(value) {
      const list = this.templateList.filter((item) => item.checkedValue)
      if (list.length > 1) {
        this.$message.warning('只能选择一个充值模版')
        value.checkedValue = false
      }
    },
    close() {
      this.$router.go(-1)
    },
    requestNextPage(pageInfo) {
      this.page_info.page = pageInfo.page
      this.clickSearch()
    },
    clickSearch() {
      const data = {
        name: this.requestData.name,
        mini_app_id: ''
      }
      rechargeList({ ...data, ...this.page_info }).then((res) => {
        if (res.status_code === 1) {
          this.page_info = res.data.page_info
          this.$message.success(res.msg)
          res.data.data.map((item) => {
            item.checked = true
            item.checkedValue = false
          })
          const index = res.data.data.findIndex((item) => item.id === this.$route.query.template_id)
          if (index !== -1) {
            this.$set(res.data.data[index], 'checkedValue', true)
          }
          this.templateList = res.data.data
        }
      })
    },
    reset() {
      this.$set(this, 'requestData', {
        name: ''
      })
    }
  }
}
</script>
  <style lang="scss" scoped>
.game-name {
  display: flex;
  align-items: center;
  .svg-icon-box {
  }
  .private_key {
    width: 120px;
    height: auto;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
  }
}
.content-table {
  overflow: auto;
}
.templateList {
  width: 1603px;
  .templateItem {
    margin-left: 20px;
  }
}
</style>
